<template>
  <div class="container">
    <el-dialog
      title="预览文章"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      class="dialog"
    >
      <h2>{{ row.title }}</h2>
      <div>
        <span class="span"> {{ row.createTime }} </span>
        <span class="span"> {{ row.username }} </span>
        <span class="span"><i class="el-icon-view"></i> {{ row.visits }} </span>
      </div>
      <div class="content" v-html="row.articleBody"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      row: {}
    }
  },
  methods: {
    showDialog () {
      // console.log(this.row)
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.dialog {
  padding: 30px, 20px;
  .content {
    background-color: #f5f5f5;
    border-top: 2px dashed #d1d1d1;
    padding: 10px;
  }
  .span {
    display: inline-block;
    margin-left: 10px;
  }
}
</style>
